@extends('user.layouts.head')
@section('content')
    <body>
    <div id="app">
        <div class="auth">
            <div class="auth-container">
                <div class="card">
                    <header class="auth-header">
                        <h1 class="auth-title">用户登录 </h1>
                    </header>
                    <div class="auth-content">

                        <div class="text-center" id="wechat_login">

                        </div>

                        <div id="login">
                            <div class="form-group">
                                <label>用户名：</label>
                                <input type="text" class="form-control" id="username" maxlength="35" placeholder="用户名/ 手机号码/ 邮箱" autofocus required>
                                <!-- <small class="form-text text-danger">工作人员永远不会向您索要任何关于账户的信息。</small> -->
                            </div>
                            <div class="form-group">
                                <label>密码：</label>
                                <input type="password" class="form-control" id="password" maxlength="16" placeholder="请输入密码" required>
                            </div>
                            <div class="form-group">
                                <label>验证码：</label>
                                <div class="row">
                                    <div class="col-7">
                                        <input type="text" class="form-control" id="captcha" maxlength="5" placeholder="请输入验证码" required>
                                    </div>
                                    <div class="col-4">
                                        <img src="{{captcha_src()}}" id="captcha_img" onclick="this.src='{{captcha_src()}}'+Math.random()">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="remember" value="">
                                    <label class="custom-control-label" for="remember">保持登录</label>
                                    <a href="{{ route('password.request') }}" class="forgot-btn">忘记密码?</a>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-block btn-primary" onclick="login();">登录</button>
                            </div>
                        </div>

                        <hr>
                        <div class="text-center" id="wechat_ico">
                            <a href="#" onclick="wechat()">
                                <li class="fa fa-weixin fa-lg text-success"></li>
                            </a>
                        </div>
                        <div class="text-center d-none" id="login_ico">
                            <a href="{{ route('login') }}">账户密码登录</a>
                        </div>
                        <br>

                        <div class="form-group">
                            <p class="text-muted text-center">还没有账户?
                                <a href="{{ route('register') }}">注册!</a>
                            </p>
                        </div>

                    </div>
                </div>
                <div class="text-center">
                    <a href="/" class="btn btn-secondary btn-sm">
                        <i class="fa fa-arrow-left"></i> 返回首页 </a>
                </div>
            </div>

        </div>
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
    <script src="{{ asset('/js/main.js') }}"></script>
    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
    <script>

        function randomString(len) {
            len = len || 32;
            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
            var maxPos = $chars.length;
            var pwd = '';
            for (i = 0; i < len; i++) {
                pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        }

        function wechat() {

            $('#login').addClass('d-none');           //添加隐藏
            $('#wechat_ico').addClass('d-none');      //添加隐藏
            $('#login_ico').removeClass('d-none');    //移除隐藏

            var obj = new WxLogin
            ({
                id: "wechat_login",//div的id
                appid: "wx1b930ea7f4a0e532",
                scope: "snsapi_login",//写死
                redirect_uri: '{{ env('WECHAT_LOGIN_REDIRECT_URI') }}',
                state: 'login',
                style: "black",//二维码黑白风格
                href: ""
            });
        }

        let isLoading = false;

        function login() {

            if (!$('#username').val()) {
                toast('用户名 不能为空');
                return false
            }
            if (!$('#password').val()) {
                toast('密码 不能为空');
                return false
            }
            if (!$('#captcha').val()) {
                toast('验证码 不能为空');
                return false
            }

            if (isLoading === false) {
                isLoading = true;
                axios.post('login', {
                    username: $('#username').val(),
                    password: $('#password').val(),
                    captcha: $('#captcha').val(),
                    remember: $('#remember').is(':checked') ? 'on' : ''
                })
                    .then(function (response) {
                        isLoading = false;
                        window.location.href = '/user/dashboard';
                    })
                    .catch(function (error) {
                        sLoading = false;
                        $.each(error.response.data.errors, function (index, object) {
                            toast(object[0]);
                            $('#captcha_img').attr('src', '/captcha/default?' + '?' + Math.random());
                            return false;
                        });
                    })
            }
        }
    </script>
    </body>
    </html>
@endsection
